<template>
    <div class="my-button">
        <my-nav-bar
            fixed
            title="角标，兄弟"
            left-text="返回"
            right-text="按钮"
            @click-left="onClickLeft"
            @click-right="onClickRight"
        ></my-nav-bar>
        <h2 class="title" style="margin-top: 46px;">角标类型</h2>
        <my-badge>1</my-badge>
        <my-badge type="primary">321</my-badge>
        <my-badge type="danger">333</my-badge>
        <my-badge type="warning">4444</my-badge>
        <my-badge type="hollow">55555</my-badge>
        <my-badge bgcolor="#000" color="#FFF">666666</my-badge>

        <my-badge shape="square">2</my-badge>
        <my-badge shape="square" type="primary">321</my-badge>
        <my-badge shape="square" type="danger">333</my-badge>
        <my-badge shape="square" type="warning">4444</my-badge>
        <my-badge shape="square" type="hollow">55555</my-badge>
        <my-badge shape="square" bgcolor="#000" color="#FFF">666666</my-badge>

    </div>
</template>
<script>
export default {
     data() {
    return {
    };
  },
  methods: {
    onClickLeft() {
      this.$router.$go(-1)
    },

    onClickRight() {
      console.log("right");
    },
  }
}
</script>
